<nc-component v-bind:data="data[index]" class="image-ads">

	<!-- 预览 -->
	<template slot="preview">

		<template v-if="nc.selectedTemplate!='carousel-posters'">
			<div v-for="(item,index) in nc.list" class="image-ads-item" v-bind:style = "{ marginBottom : ( nc.selectedTemplate=='vertically' ? (nc.imageClearance+'px') : '' ),marginRight : ( nc.selectedTemplate=='horizontal-sliding' ? (nc.imageClearance+'px') : '' ) }" v-bind:class="[nc.selectedTemplate]">
				
				<p v-show="item.imageUrl==''">
					<span>点击编辑图片广告</span>
				</p>
				<div v-show="item.imageUrl">
					<img v-bind:src="changeImgUrl(item.imageUrl)" draggable="false"/>
				</div>
				
				<span v-show="item.title">{{item.title}}</span>
				
			</div>
		</template>

		<template v-if="nc.lazyLoad && nc.selectedTemplate=='carousel-posters'">
			<image-ads-carouse v-bind:index="index"></image-ads-carouse>
		</template>
		
	</template>
	
	<!-- 编辑 -->
	<template slot="edit">
	
		<div class="layui-form-item">
			<label class="layui-form-label sm">选择模板</label>
			<div class="layui-input-block">
				<div class="selected-template-list">
					<ul>
						<li v-bind:class="['nc-border-color-selected',nc.selectedTemplate == 'carousel-posters' ? 'selected' : '']"
							v-on:click="nc.selectedTemplate = 'carousel-posters'">
							<img src="RESOURCE_PATH/component/view/image_ads/img/carousel_posters.png">
							<div>轮播海报</div>
						</li>
						<li v-bind:class="['nc-border-color-selected',nc.selectedTemplate == 'vertically' ? 'selected' : '']"
							v-on:click="nc.selectedTemplate = 'vertically'">
							<img src="RESOURCE_PATH/component/view/image_ads/img/ads_vertically.png">
							<div>垂直排列</div>
						</li>
						<li v-bind:class="['nc-border-color-selected',nc.selectedTemplate == 'horizontal-sliding' ? 'selected' : '']"
							v-on:click="nc.selectedTemplate = 'horizontal-sliding'">
							<img src="RESOURCE_PATH/component/view/image_ads/img/horizontal_sliding.png">
							<div>横向滑动</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item" v-show="nc.selectedTemplate != 'carousel-posters'">
			<label class="layui-form-label sm">图片间隙</label>
			<input type="range" v-model="nc.imageClearance" max="100" />
			<label>&nbsp;{{nc.imageClearance}}像素</label>
		</div>
		
		<template v-if="nc.lazyLoad">
			<image-ads-list></image-ads-list>
		</template>
		
	</template>
	
	<!-- 资源 -->
	<template slot="resource">
		
		<css src="RESOURCE_PATH/component/view/image_ads/css/design.css"></css>
		<js src="RESOURCE_PATH/component/view/image_ads/js/design.js"></js>
		
	</template>
	
	<template slot="verify">
		function verify(){
			var res = { code : true, message : "" };
			
			$(".draggable-element[data-index='{{index}}'] .image-ads .image-ad-list>ul>li").each(function(index){
			
				if(vue.data[{{index}}].list[index].imageUrl == ""){
					res.code = false;
					res.message = "请添加图片";
					$(this).find(".error-msg").text("请添加图片").show();
					return res;
				}else{
					$(this).find(".error-msg").text("").hide();
				}
			});
			
			return res;
		}
	</template>

</nc-component>